<template>
  <div>
    <h1>讨论详情</h1>
    <h4>{{ discussion.user }} @ {{ discussion.date }}</h4>
    <p>{{ discussion.content }}</p>
    <img 
      v-if="discussion.image" 
      :src="discussion.image" 
      alt="讨论图片" 
      class="discussion-image"
    />

    <div class="button-container">
      <button @click="goBack" class="back-button">返回</button>
      <div class="like-section">
        <button @click="toggleLike">{{ liked ? '取消点赞' : '点赞' }}</button>
        <button @click="toggleFavorite">{{ favorite ? '取消收藏' : '收藏' }}</button>
        <span>{{ likeCount }} 人觉得不错</span>
      </div>
    </div>

    <div class="comments-section">
      <h3>评论区</h3>
      <div v-for="comment in comments" :key="comment.id" class="comment">
        <p>
          <strong>{{ comment.user }}:</strong> {{ comment.content }}
          <button @click="toggleCommentLike(comment)" class="like-button">{{ comment.liked ? '取消点赞' : '点赞' }}</button>
          <span>{{ comment.likeCount }} 点赞</span>
          <button v-if="comment.user === '当前用户'" @click="deleteComment(comment.id)" class="delete-button">删除</button>
        </p>
      </div>
      <div class="comment-input">
        <input 
          v-model="newComment" 
          placeholder="添加评论..." 
          @keyup.enter="addComment"
        />
        <button @click="addComment">发送</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      discussion: {},
      comments: [],
      newComment: '',
      likeCount: 0,
      liked: false,
      favorite: false // 新增收藏状态
    };
  },
  created() {
    const discussionId = this.$route.params.discussionId;
    this.fetchDiscussionDetails(discussionId);
  },
  methods: {
    async fetchDiscussionDetails(discussionId) {
      console.log(`Fetching discussion with ID: ${discussionId}`);
      // Simulated API call (replace this with actual API call later)
      this.discussion = {
        user: "用户示例",
        date: "2024-10-23 12:00",
        content: "这是讨论的内容示例。",
        image: null // 或者一些图片 URL
      };

      // Simulated comments (replace with actual API call later)
      this.comments = [
        { id: 1, user: '评论者1', content: '这是第一个评论', likeCount: 0, liked: false },
        { id: 2, user: '评论者2', content: '这是第二个评论', likeCount: 0, liked: false }
      ];
    },
    toggleLike() {
      this.liked = !this.liked;
      this.likeCount += this.liked ? 1 : -1;
    },
    toggleFavorite() {
      this.favorite = !this.favorite; // 切换收藏状态
    },
    addComment() {
      if (this.newComment.trim()) {
        const newCommentObject = {
          id: this.comments.length + 1,
          user: '当前用户', // 应替换为实际用户
          content: this.newComment.trim(),
          likeCount: 0,
          liked: false
        };
        this.comments.push(newCommentObject);
        this.newComment = ''; // 清空输入框
      }
    },
    toggleCommentLike(comment) {
      comment.liked = !comment.liked;
      comment.likeCount += comment.liked ? 1 : -1;
    },
    deleteComment(commentId) {
      this.comments = this.comments.filter(comment => comment.id !== commentId);
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  color: #333;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #4a4a4a;
  font-size: 2em;
  margin-bottom: 10px;
}

h4 {
  color: #6c757d;
  margin-bottom: 20px;
}

p {
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.discussion-image {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  margin: 20px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.back-button {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  transition: background-color 0.3s;
}

.back-button:hover {
  background-color: #0056b3;
}

.like-section {
  display: flex;
  align-items: center;
}

.like-section button {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #28a745;
  color: white;
  transition: background-color 0.3s;
  margin-left: 10px;
}

.like-section button:hover {
  background-color: #218838;
}

.comments-section {
  margin-top: 30px;
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h3 {
  margin-top: 0;
  color: #4a4a4a;
}

.comment {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 0;
}

.comment:last-child {
  border-bottom: none;
}

.comment-input {
  display: flex;
  margin-top: 10px;
}

.comment-input input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
  transition: border-color 0.3s;
}

.comment-input input:focus {
  border-color: #007bff;
  outline: none;
}

.comment-input button {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  transition: background-color 0.3s;
}

.comment-input button:hover {
  background-color: #0056b3;
}

.like-button {
  background-color: #ffc107;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  margin-left: 10px;
}

.like-button:hover {
  background-color: #e0a800;
}

.delete-button {
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  margin-left: 10px;
}

.delete-button:hover {
  background-color: #c82333;
}
</style>
